<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ECharts with Image X Axis</title>
  <!-- 引入 ECharts -->
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
</head>
<body>
  <!-- 用于展示 ECharts 图表的容器 -->
  <div id="chart" style="width: 600px; height: 400px;"></div>

  <script>
    // 初始化 ECharts 实例
    var chartDom = document.getElementById('chart');
    var myChart = echarts.init(chartDom);

    // 图表数据
    var data = [
      { value: 10, image: 'https://img95.699pic.com/photo/40250/3909.jpg_wh300.jpg' },
      { value: 20, image: 'https://img95.699pic.com/photo/40250/3909.jpg_wh300.jpg' },
      // 添加更多数据点
    ];

    // 使用图片作为横坐标标签
    var option = {
      xAxis: {
        type: 'category',
        data: data.map(item => ({
          value: item.value,
          textStyle: {
            padding: [0, 0, 20, 0], // 调整图片与坐标轴之间的间距
          },
          formatter: function(params) {
        return '<img src="' + params.value.image + '" style="width: 30px; height: 30px;">';
        }
        })),
        axisLabel: {
          interval: 0,
          rotate: -45 // 如果需要旋转图片，可以设置这个参数
        },
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: data.map(item => item.value),
        type: 'bar'
      }]
    };

    // 设置图表配置项并渲染图表
    myChart.setOption(option);
  </script>
</body>
</html>
